<template>
  <!-- 根据当前路由组件来决定是否加载 -->
  <div class="footer-guide" v-show="$route.meta.showFooter">
    <router-link to="/msite">
      <i class="iconfont icon-B"></i>
      <span>外卖</span>
    </router-link>

    <router-link to="/search">
      <i class="iconfont icon-search"></i>
      <span>搜索</span>
    </router-link>

    <router-link to="/order">
      <i class="iconfont icon-dingdan"></i>
      <span>订单</span>
    </router-link>

    <router-link to="/profile">
      <i class="iconfont icon-geren"></i>
      <span>我的</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "FooterGuide",
}
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
.footer-guide {
  .top-border-1px(#e4e4e4);
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 320px;
  max-width: 750px;
  height: 5rem;
  padding-top: 0.4rem;
  background-color: #fff;
  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999999;
    i {
      font-size: 2.8rem;
    }
    span {
      font-size: 1.2rem;
      margin-top: -0.2rem;
    }
    &.router-link-active {
      color: @theme-color;
    }
  }
}
</style>
